<template>
  <div class="menu-container">
    <a-menu :selectedKeys="defaultSelectedKeys" mode="inline">
      <a-menu-item v-for="menuItem in menuList" :key="menuItem.key"
                   @click="$emit('onMenuItemChange', menuItem)">
        <p class="menu-item">
          <span class="left" :title="menuItem.title"> {{ menuItem.title }}</span>
          <span class="right" v-if="menuItem.subTitle">
            {{ menuItem.subTitle }}
          </span>

        </p>
      </a-menu-item>
    </a-menu>
  </div>
</template>
<script>
export default {
  name: 'Menu',
  props: {
    defaultSelectedKeys: Array,
    menuList: Array
  },
  data() {
    return {
    };
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
.menu-container {
  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #111111;

    .left {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .right {
      flex-shrink: 0;
      background: #F9FAFD;
      border: 1px solid rgba(0, 0, 0, 0);
      border-radius: 4px;
      min-width: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #999999;
      padding: 0 2px;
      font-weight: 500;
      text-align: center;
      margin-left: 12px;
    }
  }
}

.menu-container ::v-deep {
  .ant-menu-inline {
    .ant-menu-item {
      padding-left: 20px !important;
      margin: 0;
      height: 44px;
      width: 100%;
      line-height: 44px;

      &::after {
        content: none;
      }

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        border-left: 2px solid var(--theme-brand6, #0077FF);
        transform: scaleY(.0001);
        opacity: 0;
        transition: transform .15s cubic-bezier(.215, .61, .355, 1), opacity .15s cubic-bezier(.215, .61, .355, 1);
        content: "";
      }

      &:hover {
        background-image: linear-gradient(90deg, var(--theme-brand1, #ebeffe) 0%, #ffffff 100%);
      }
    }

    .ant-menu-item-selected {
      font-weight: 500;
      background-color: unset;
      background-image: linear-gradient(90deg, var(--theme-brand1, #ebeffe) 0%, #fff 100%);

      &::before {
        transform: scaleY(1);
        opacity: 1;
        transition: transform .15s cubic-bezier(.645, .045, .355, 1), opacity .15s cubic-bezier(.645, .045, .355, 1);

      }

      .menu-item :last-child {
        border-color: #ECEFF6;
        color: var(--theme-brand6, #315CFA);
      }
    }
  }

  .ant-menu {
    border: none;
  }
}
</style>

